<template>
    <div>
        <el-button type="text" @click="showSelectBox">添加超参</el-button>
        <el-table v-if="parameter_list.length > 0" :data="parameter_list" class="code-detail-table"
            header-row-class-name="code-detail-table-header">
            <el-table-column prop="name" label="显示名" />
            <el-table-column prop="key" label="参数名" />
            <el-table-column prop="value" label="参数值" />
            <el-table-column prop="path" label="操作">
                <template slot-scope="scope">
                    <!--<el-button type="text" @click="put(row)">修改</el-button>-->
                    <el-button type="text" @click="removetag(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="showSelectDialog" title="添加超参" @onClose="onClose" width="640px">
            <el-form class="form myself-form" ref="form" :model="addForm" :rules="submitRules" label-width="120px">
                <el-form-item label="显示名" prop="name">
                    <el-input type="text" v-model="addForm.name" />
                </el-form-item>
                <el-form-item label="参数名" prop="key">
                    <el-input type="text" v-model="addForm.key" />
                </el-form-item>
                <el-form-item label="参数值" prop="value">
                    <el-input type="text"  v-model="addForm.value" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button class="none-type" @click="onClose">取消</el-button>
                <el-button type="primary" @click="surebtn">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
export default {
    name: 'plugParameter',
    data() {
        return {
            showSelectDialog: false,
            checkParameters: [],
            addForm: {
            },
            submitRules: {
                name: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
                ],
                key: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
                ],
                value: [
                    { required: true, message: "该项为必填项" },
                    { required: true, min: 1, max: 255, message: "长度在1到255个字符" },
                ],
            }
        }
    },
    props: ["parameter_list"],
    watch: {
        parameter_list(val) {
            console.log("parameter_list222", this.parameter_list)
            console.log(val)
            // this.checkParameters = val.map(e => e.parameter_list || e)
            // console.log(this.checkParameters)
        }
    },
    methods: {
        surebtn() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    let index
                    for (index in this.parameter_list)
                    {
                        let item = this.parameter_list[index]
                        if (item.name == this.addForm.name){
                            alert("名称已经存在")
                            return
                        }
                    }
                    const data = JSON.parse(JSON.stringify(this.addForm));
                    this.parameter_list.push(data)
                    this.$emit('infoParameter', this.parameter_list)
                    this.showSelectDialog = false;
                    this.$emit('onClose', false)
                }
            })
        },

        removetag(index) {
            this.parameter_list.splice(index, 1);
            this.parameter_list = JSON.parse(JSON.stringify(this.parameter_list))
            console.log(this.parameter_list)
            this.$emit('infinfoParameteroS3', this.parameter_list)
        },
        showSelectBox() {
            this.showSelectDialog = true;
        },
        onClose() {
            this.showSelectDialog = false;
            this.$emit('onClose', false)
        },
    },
    mounted() {
        console.log('cc')
    },
    destroyed() {

    }
}
</script>
  
<style lang="less" scoped>
.myself-dataset-checkbox {
    display: flex;

    /deep/ .el-checkbox__input {
        padding-top: 28px;
    }
}




.infinite-list {
    min-height: 380px;
    padding: 20px 0;
}

.infinite-list-item {
    margin-bottom: 20px;
    float: left;
    //width: 496px;
    width: 992px;
}

.elrowgutter {
    /deep/.el-button--default {
        margin-left: 100px;
        width: 80%;
        background-color: #f5f7fa;
        color: #1e2480;
        margin-bottom: 20px;
    }

    /deep/.el-form-item__label {
        text-align: right;
        padding-right: 30px;
    }
}

.delnode {
    margin-left: 73%;
}

.run-model-title {
    color: #303133;
}

.run-model-table {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 0 8px;
    margin-top: 6px;

    .r-m-box {
        border-top: 1px solid #e8e8e8;
        height: 38px;
        line-height: 38px;

        .r-m-name {
            float: left;
            width: 148px;
            padding-left: 14px;
        }

        .r-m-product {
            float: left;
            width: 250px;
        }

        .r-m-command {
            float: left;
            width: 120px;

            .popover {
                cursor: pointer;

                i {
                    font-size: 16px;
                    color: #4285F4;
                }
            }
        }

        .r-m-number {
            float: left;
        }
    }

    .no-border {
        border: 0;
    }
}

.el-tooltip__popper {
    max-width: 400px;
    line-height: 180%;
}

.checkbox-true {
    // background: url(~@/assets/img/checkbox-true.jpg) no-repeat;
    background-size: 18px 18px;
}

.checkbox-false {
    // background: url(~@/assets/img/checkbox-false.jpg) no-repeat;
    background-size: 18px 18px;
}

.adorn-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    float: left;
    margin-top: 20px;
    margin-right: 10px;
}

.dimg {
    width: 123px;
    height: 75px;
    float: left;
}

.datas-box {
    float: left;
    width: 296px;

    .datasname {
        vertical-align: top;
        font-weight: 800;
        font-size: 16px;
        line-height: 22px;
        overflow: hidden;
        display: -webkit-box; //将元素设为盒子伸缩模型显示
        -webkit-box-orient: vertical; //伸缩方向设为垂直方向
        -webkit-line-clamp: 1;
    }

    .pcontents {
        margin: 15px 0 0 5px;
        font-size: 14px;
        color: #606266;
        line-height: 24px;
        margin-top: 5px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .pall {
        overflow: hidden;
        margin-left: 5px;
    }
}

.version-box {
    float: right;

    .sb {
        /deep/.el-input.el-input__inner {
            border-color: #4285f4 !important;
            font-size: 12;
        }
    }
}

.dataset-tags-box {
    // width: 240px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;

    .dataset-addr {
        padding-left: 10px;
        line-height: 30px;
        float: left;
    }

    .delstr {
        color: red;
    }
}

.dataset-tags {
    // display: block;
    // max-width: 240px;
    float: left;

    /deep/ .el-tag__close {
        float: left;
        margin-top: 6px;
    }

    .dataset-tags-word {
        // display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        width: 140px;
        float: left;
    }
}
</style>
  